<template>
	<view class="page-head" :style="{'padding-top':paddingTop+'px'}">
		<!-- logo，使用image组件显示猫咪的LOGO -->
		<view class="logo-contanier">
			<!--搜索输入框-->
			<image class="logo-image" :src="logoSrc" mode="aspectFit"></image>
		</view>
		<view class="search-container" @click="handleToSearchPage">
			<uni-section title="" subTitle="" type="line">
				<uni-search-bar placeholder="华为p40" bgColor="#EEEEEE" @confirm="search" />
			</uni-section>
		</view>
	</view>
</template>

<script>
	import {
		carouselFigureApi
	} from '@/api/used/used.js'

	export default {
		props: {
			mode:"light",
			url:""
		},
		computed: {
			logoSrc() {
				let light = '/static/logo/logo.png';
				let black = "/static/logo/logo-white.png";
				let srcMap = {
					light,
					black
				}
				return srcMap[this.mode];
			}
		},
		data() {
			return {
				paddingTop: 0,
				carouselFigureList: [] // 轮播图数据
			}
		},
		onLoad() {
			this.handleCarouselFigureList();
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let MenuButtonBoundingClientRect = uni.getMenuButtonBoundingClientRect();
			this.paddingTop = MenuButtonBoundingClientRect.top;
			// #endif
		},
		methods: {
			async handleCarouselFigureList() {
				try {
					const {
						data: res
					} = await carouselFigureApi();
					if (res.success) {
						this.carouselFigureList = res.data.list;
					} else {
						uni.showToast({
							title: '获取轮播图失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取轮播图数据出错:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},
			handleToSearchPage() {
				uni.navigateTo({
					url: this.url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-head {
		padding: 0 32rpx;
		padding-bottom: 8rpx;
		box-sizing: border-box;


		// logo区域
		.logo-contanier {
			display: flex;
			align-items: center;
			z-index: 1;
			position: relative;

			.logo-image {
				float: left;
				width: 310rpx;
				height: 128rpx;
			}

			.logo-text {
				width: 180rpx;
				height: 56rpx;
				margin-left: 20px;
			}
		}

		// 搜索区域
		.search-container {
			margin-top: -10rpx;

			z-index: 0;
			position: relative;

			// 因组件库无法满足圆角需求 故改为deep方式改变样式
			::v-deep(.uni-easyinput__content) {
				border-radius: 24rpx !important;
			}
		}
	}
</style>